<template>
    <div>
        <span>二维码: </span>
        <input type="text" v-model="showContent.qrcode" />
        <br />
        <br />
        <span>物料名称: </span>
        <input type="text" v-model="showContent.c1" />
        <br />
        <br />
        <span>物料代码: </span>
        <input type="text" v-model="showContent.c2" />
        <br />
        <br />
        <span>规格型号: </span>
        <input type="text" v-model="showContent.c3" />
        <br />
        <br />
        <span>供应商名称: </span>
        <input type="text" v-model="showContent.c4" />
        <br />
        <br />
        <span>数量$单位: </span>
        <input type="text" v-model="showContent.c5" />
        <br />
        <br />
        <span>批次号: </span>
        <input type="text" v-model="showContent.c6" />
        <br />
        <br />
        <button @click="printTest">打印1</button>
        <!-- <button @click="printTest2">打印带二维码的表格</button> -->
        <!-- <div id="templateDesignDiv"></div> -->
        <div class="templateDesignDiv1"></div>
        <div class="templateDesignDiv2"></div>
        
    </div>
    </template>
    
    <script lang="ts">
    import {
        defineComponent,
        reactive
    } from "vue";
    
    export default defineComponent({
        name: "App",
        setup() {
            const showContent = reactive({
                qrcode: '你好',
                c1: '杰特端子/12P插座',
                c2: '2.29.13.51042',
                c3: 'NXBLE-32 1P+N D16 30mA 6kA',
                c4: '安徽广识电气有限公司',
                c5: '200只',
                c6: '2012091201',
            })
            const showContent2 = reactive({
                number: '编码',
                title:'表头',
                name: '名字',
                duanluqi: '断路器',
                bianma: '编码',
                qrcode: '安徽广识电气有限公司'
            })
            const mypanel: any = reactive({
                panels: [{
                    "index": 0,
                    "height": 60,
                    "width": 60,
                    "paperHeader": 49.5,
                    "paperFooter": 170.07874015748033,
                    "printElements": [{
                        "options": {
                            "left": 6,
                            "top": 0,
                            "height": 60,
                            "width": 60,
                            "title": "广识电气",
                            "field": "qrcode",
                            "testData": "广识电气",
                            "textType": "qrcode",
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "right": 60,
                            "bottom": 60,
                            "vCenter": 30,
                            "hCenter": 30
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 66,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容1",
                            "field": "c1",
                            "testData": "1.xxxxx",
                            "hideTitle": true,
                            "right": 123,
                            "bottom": 75.75,
                            "vCenter": 63,
                            "hCenter": 70.875,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "fontSize": 12,
                            "qrCodeLevel": 0
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 82.5,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容1",
                            "field": "c2",
                            "testData": "2.xxxxx",
                            "hideTitle": true,
                            "right": 120,
                            "bottom": 91.5,
                            "vCenter": 60,
                            "hCenter": 86.625,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "fontSize": 12
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 99,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容3",
                            "field": "c3",
                            "testData": "3.xxxxx",
                            "hideTitle": true,
                            "right": 119.25,
                            "bottom": 108.75,
                            "vCenter": 59.25,
                            "hCenter": 103.875,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "fontSize": 12
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 117,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容4",
                            "field": "c4",
                            "testData": "4.xxxxx",
                            "hideTitle": true,
                            "right": 120,
                            "bottom": 126.75,
                            "vCenter": 60,
                            "hCenter": 121.875,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "fontSize": 12
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 135,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容5",
                            "field": "c5",
                            "testData": "5.xxxxx",
                            "hideTitle": true,
                            "right": 119.49609375,
                            "bottom": 144.99609375,
                            "vCenter": 59.49609375,
                            "hCenter": 140.12109375,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "fontSize": 12
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }, {
                        "options": {
                            "left": 6,
                            "top": 151.5,
                            "height": 9.75,
                            "width": 120,
                            "title": "内容6",
                            "field": "c6",
                            "testData": "6.xxxxx",
                            "hideTitle": true,
                            "right": 122.49609375,
                            "bottom": 161.49609375,
                            "vCenter": 62.49609375,
                            "hCenter": 156.62109375,
                            "coordinateSync": false,
                            "widthHeightSync": false,
                            "qrCodeLevel": 0,
                            "fontSize": 12
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }],
                    "paperNumberLeft": 139.5,
                    "paperNumberTop": 148.5,
                    "paperNumberDisabled": true
    
                }, ],
            });
            const mypanel2: any = reactive({
                panels: [{
                    "index": 0,
                    "height": 60,
                    "width": 60,
                    "paperHeader": 0,
                    "paperFooter": 166.5,
                    "printElements": [{
                        "options": {
                            "left": 6,
                            "top": 34.5,
                            "height": 109.5,
                            "width": 159,
                            "field": "number",
                            "tableBodyRowHeight": 30,
                            "columns": [
                                [{
                                    "title": "主体1",
                                    "field": "title",
                                    "width": 275,
                                    "align": "center",
                                    "colspan": 2,
                                    "rowspan": 1,
                                    "checked": true
                                }],
                                [{
                                    "title": "库位名",
                                    "field": "name",
                                    "width": 275,
                                    "colspan": 1,
                                    "rowspan": 1,
                                    "checked": true
                                }, {
                                    "title": "断路器",
                                    "field": "duanluqi",
                                    "width": 275,
                                    "colspan": 1,
                                    "rowspan": 1,
                                    "checked": true
                                }],
                                [{
                                    "title": "A01 - 1 - 1",
                                    "field": "number",
                                    "width": 159,
                                    "colspan": 2,
                                    "rowspan": 1,
                                    "checked": true
                                }]
                            ]
                        },
                        "printElementType": {
                            "title": "表格",
                            "type": "tableCustom"
                        }
                    }, {
                        "options": {
                            "left": 96,
                            "top": 69,
                            "height": 18,
                            "width": 49.5,
                            "title": "二维码",
                            "field": "qrcode",
                            "testData": "这是二维码111",
                            "textType": "qrcode"
                        },
                        "printElementType": {
                            "type": "text"
                        }
                    }],
                    "paperNumberLeft": 139.5,
                    "paperNumberTop": 148.5,
                    "paperNumberDisabled": true
                }]
            })
    
            const printTest: any = function () {
                let printData = {
                    qrcode: showContent.qrcode,
                    c1: showContent.c1,
                    c2: showContent.c2,
                    c3: showContent.c3,
                    c4: showContent.c4,
                    c5: showContent.c5,
                    c6: showContent.c6,
                };
               
                //  打印模板的json
    
                // printData.table = this.data;
                //获取系统时间进行打印
                // let getDate = new Date();
                // printData.printTime = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';
    
                const hiprint: any = (window as any).hiprint;
                hiprint.init();
    
                //调用接口获取数据
                var hiprintTemplate = new hiprint.PrintTemplate({
                    template: mypanel,
                    settingContainer: ".templateDesignDiv1",
                });
               
    
                // wewin.LabelPrint(json);
                hiprintTemplate.print([printData]);
            }
            const printTest2: any = function () {
                let printData2 = {
                    number: showContent2.number,
                    name: showContent2.name,
                    duanluqi: showContent2.duanluqi,
                    bianma: showContent2.bianma,
                    qrcode: showContent2.qrcode,
                    title:showContent2.title,
                };
                //  打印模板的json
    
                // printData.table = this.data;
                //获取系统时间进行打印
                // let getDate = new Date();
                // printData.printTime = getDate.getFullYear() + '.' + getDate.getMonth() + '.' + getDate.getDay() + ' ';
    
                const hiprint: any = (window as any).hiprint;
                hiprint.init();
    
                //调用接口获取数据
    
                var hiprintTemplate2 = new hiprint.PrintTemplate({
                    template: mypanel2,
                    settingContainer: ".templateDesignDiv2",
                });
                // wewin.LabelPrint(json);
                hiprintTemplate2.print([printData2]);
            }
    
            return {
                mypanel,
                mypanel2,
                printTest,
                printTest2,
                showContent
            };
        },
    });
    </script>
    
    <style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    </style>
    